<template>
  <ul>
    <li v-for="product in products" :key="product.id">
      {{ product.title }} - {{ currency(product.price) }}
      <br />
      <button :disabled="!product.inventory" @click="addProductToCart(product)">
        Add to cart
      </button>
    </li>
  </ul>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
import { currency } from "../currency";

const store = useStore();
//接受数据
const products = computed(() => store.state.products.all);
//
const addProductToCart = (product) => {
  store.dispatch("cart/addProductToCart", product);
};
//派遣一个工作
store.dispatch("products/getAllProducts");
</script>

<style scoped></style>
